import { Desk } from "./disPlayConfig";
import disItem from "./disItem";
import size = cc.size;

const { ccclass, property } = cc._decorator;

@ccclass
export default class disPlayItem extends cc.Component {

    @property(cc.Label)
    lbName: cc.Label = null;
    @property(cc.Label)
    lbNameBottom: cc.Label = null;
    @property(cc.Node)
    ndContentList: cc.Node = null;
    @property(cc.Prefab)
    pbDisItem: cc.Prefab = null;
    @property(cc.Mask)
    minMask: cc.Mask = null;
    @property(cc.Node)
    minMask2: cc.Node = null;
    @property(cc.ScrollView)
    svList: cc.ScrollView = null;
    @property()
    showTime: number = 0.4;

    protected onLoad(): void {

    }

    protected start(): void {
        this.initView();
        this.svList.node.on('touchstart', this.onTouStart, this);
        this.svList.node.on('touchmove', this.onTouMove, this);
        this.svList.node.on('touchend', this.onTouEnd, this);
        this.svList.node.on('touchcancel', this.onTouEnd, this);
    }

    //
    private m_data: Desk.DisGroup = null;
    //
    private m_minPos: cc.Vec2 = null;
    private m_maxPos: cc.Vec2 = null;
    private m_minSize: cc.Size = null;
    //
    private m_isMin: boolean = null;
    //
    private isAction: boolean = null;

    private initView() {
        if (this.m_data == null) {
            console.error('#27 请先初始化数据');
            return;
        }
        //
        for (let itemId of this.m_data.disItemIdList) {
            this.lbNameBottom.string = this.lbName.string = this.m_data.name;
            let node = cc.instantiate(this.pbDisItem);
            this.ndContentList.addChild(node);
            //
            let com = node.getComponent(disItem);
            com.setId(itemId);
            com.addParentClick(() => {
                this.m_isScroll = true;
            });
        }
        //
        this.onMin(true);
    }

    private m_click: boolean = false;
    protected onTouStart(event: cc.Event.EventTouch) {
        this.m_click = true;
    }
    protected onTouMove(event: cc.Event.EventTouch) {
        this.m_click = false;
    }
    protected onTouEnd(event: cc.Event.EventTouch) {
        if (this.m_click) {
            this.onBtnThis();
        }
    }

    protected onBtnThis() {
        if (this.m_isMin) {
            this.onMax();
        } else {
            this.onMin();
        }
    }

    private m_isScroll: boolean = null;

    protected onScrollView(event, target) {
        /*
        //
        console.log('输出', this.svList.isScrolling() || this.svList.isAutoScrolling(), this.svList.isScrolling(), this.svList.isAutoScrolling());
        //
        if (this.svList.isScrolling() || this.svList.isAutoScrolling()) {
            return;
        }
        this.onBtnThis();
        return;
        */
        if (!this.m_isMin) return;
        //
        let scrollFunction = () => {
            let isScroll = this.svList.isScrolling();
            if (this.m_isScroll || isScroll) {
                this.m_isScroll = isScroll;
                return;
            }
            this.onBtnThis();
        };
        if (!this.svList.isScrolling()) {
            this.scheduleOnce(scrollFunction);
        } else {
            scrollFunction();
        }
    }

    onMin(isInit?: boolean) {
        if (this.isAction) return;
        //
        this.node.zIndex = 0;
        this.isAction = true;
        this.minMask2.active = this.minMask.enabled = true;
        this.m_isMin = true;
        this.lbName.node.active = false;
        this.lbNameBottom.node.active = false;
        this.svList.vertical = false;

        //
        let layout = this.ndContentList.getComponent(cc.Layout);
        //
        if (isInit) {
            this.scheduleOnce(() => {
                this.svList.node.scaleY = 16 / 9;
            })
            this.lbNameBottom.node.active = true;
            this.node.scaleX = this.m_minSize.width;
            this.node.scaleY = this.m_minSize.height;
            this.node.setPosition(this.m_minPos);
            this.isAction = false;
            layout.paddingTop = 154 + 86.8;
            return;
        }
        //
        cc.Tween.stopAllByTarget(this.svList.node);
        cc.Tween.stopAllByTarget(this.node);
        cc.tween(this.node)
            .parallel(
                // cc.tween().to(this.showTime, {x: this.m_minPos.x, y: this.m_minPos.y}),
                cc.tween(this.node)
                    .to(this.showTime * 0.5, { y: this.m_minPos.y + 300 }, { easing: 'quadOut' })
                    .to(this.showTime * 0.5, { y: this.m_minPos.y }, { easing: 'quadIn' }),
                cc.tween(this.node).to(this.showTime, { x: this.m_minPos.x }),
                cc.tween().to(this.showTime, { scaleX: this.m_minSize.width, scaleY: this.m_minSize.height })
            )
            .call(() => {
                this.lbNameBottom.node.active = true;
                this.ndContentList.y = 517;
                this.isAction = false;
            })
            .start();
        cc.tween(this.svList.node)
            .to(this.showTime, { scaleY: 16 / 9 })
            .start();
        cc.tween(layout)
            .to(this.showTime, { paddingTop: 154 + 86.8 })
            .start();
    }

    onMax() {
        if (this.isAction) return;

        this.isAction = true;
        // this.minMask2.active = this.minMask.enabled = false;
        this.m_isMin = false;
        this.lbName.node.active = false;
        this.lbNameBottom.node.active = false;
        this.svList.vertical = true;
        this.node.zIndex = 1;
        //
        let layout = this.ndContentList.getComponent(cc.Layout);
        //
        cc.Tween.stopAllByTarget(this.node);
        cc.Tween.stopAllByTarget(this.svList.node);

        cc.tween(this.node)
            .parallel(
                // cc.tween().to(this.showTime, {x: this.m_maxPos.x, y: this.m_maxPos.y}),
                cc.tween(this.node)
                    .to(this.showTime * 0.5, { y: this.m_maxPos.y + 375 }, { easing: 'quadOut' })
                    .to(this.showTime * 0.5, { y: this.m_maxPos.y }, { easing: 'quadIn' }),
                cc.tween(this.node).to(this.showTime, { x: this.m_maxPos.x }),
                cc.tween().to(this.showTime, { scale: 1 })
            )
            .call(() => {
                this.lbName.node.active = true;
                this.minMask2.active = this.minMask.enabled = false;
                this.isAction = false;
            })
            .start();
        cc.tween(this.svList.node)
            .to(this.showTime, { scaleY: 1 })
            .start();
        cc.tween(layout)
            .to(this.showTime, { paddingTop: 86.8 })
            .start();

    }

    setMaxMinParam(minPos: cc.Vec2, maxPos: cc.Vec2, minSize: cc.Size) {
        this.m_minPos = minPos.clone();
        this.m_maxPos = maxPos.clone();
        this.m_minSize = minSize.clone();
    }

    //
    bindData(data: Desk.DisGroup) {
        this.m_data = data;
    }
}
